import { LocalizationContext, Position, Tooltip } from "../../core";

import { RenderOpenProps } from "./Open";
import OpenFileIcon from "./OpenFileIcon";
import { FC, useContext } from "react";

const TOOLTIP_OFFSET = { left: 0, top: 8 };

const OpenButton: FC<RenderOpenProps> = ({ onClick }) => {
  const l10n = useContext(LocalizationContext);

  const label = l10n && l10n.open ? l10n.open.openFile : "Open file";

  return (
    <Tooltip
      position={Position.BottomCenter}
      target={
        <div className="rpv-open__button rpv-open__input-wrapper">
          <input
            className="rpv-open__input"
            multiple={false}
            type="file"
            title=""
            onChange={onClick}
          />
          <OpenFileIcon />
        </div>
      }
      content={() => label}
      offset={TOOLTIP_OFFSET}
    />
  );
};

export default OpenButton;
